<style lang="less">
	.home {
		&-one {
			display: flex;
			margin-top: 30px;
			&-l {
				flex: 1;
				background: #fff;
				display: flex;
				flex-direction: column;
			}
			&-r {
				width: 430px;
				background: #fff;
				height: 470px;
				margin-left: 30px;
			}
		}
		&-title {
			padding: 23px 37px 27px 26px;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			span {
				color: #5F5F5F;
				font-size: 20px;
				flex: 1;
			}
			i {
				cursor: pointer;
			}
			b {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: #0052D9;
				display: inline-block;
				margin-right: 2px;
			}
		}
		&-tool {
			&-parade {
				padding: 38px 27px 0 25px;
				.imgNull {
					width: 100%;
					display: block;
				}
			}
			&-item {
				display: flex;
				align-items: center;
				margin-bottom: 38px;
			}
			&-item:nth-of-type(1) {
				margin-bottom: 22px;
			}
			&-item:nth-of-type(2) {
				margin-bottom: 22px;
			}
			&-num {
				color: #0052D9;
				font-size: 20px;
				font-weight: bold;
				margin-right: 38px;
				width: 47pxs;
				img {
					width: 39px;
					display: block;
					margin: 0 auto;
				}
			}
			&-name {
				font-size: 20px;
				color: #5F5F5F;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
			}
			&-ci {
				font-size: 20px;
				color: #5F5F5F;
			}
		}
		&-two {
			background: #fff;
			margin-top: 30px;
			&-bar {
				display: flex;
				justify-content: space-between;
				padding: 0 38px;
				margin: 32px 0;
			}
			&-buff {
				display: flex;
				>span {
					display: flex;
					align-items: center;
					margin-right: 45px;
				}
			}
			&-btn {
				display: flex;
				span {
					width: 32px;
					height: 32px;
					border-radius: 5px;
					background: #F0F3FF;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
			}
		}
		&-existence {
			width: 17px;
			height: 17px;
			background: rgba(32, 206, 40, 1);
			border-radius: 50%;
			display: inline-block;
			margin-right: 10px;
		}
		&-disappear {
			margin-right: 10px;
			width: 17px;
			height: 17px;
			background: #222;
			display: inline-block;
			border-radius: 50%;
		}
		&-toolList {
			padding: 0 38px 38px 38px;
			&-box {
				border: 1px solid #DDDDDD;
				padding: 25px 20px;
			}
			.imgNull {
				display: block;
				margin: 0 auto;
			}
		}
		&-toolItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 1;
			margin-bottom: 16px;
			&-name {
				color: #AAAAAA;
				font-size: 25px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			&-state {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				line-height: 1;
				padding: 26px 0;
				span {
					color: #AAAAAA;
					font-size: 16px;
					b {
						color: #222;
						font-size: 33px;
						margin-left: 10px;
					}
				}
			}
			&-son {
				color: #222222;
				font-size: 16px;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			&-list {
				padding-top: 40px;
				max-height: 296px;
				overflow-y: auto;
			}
		}
		&-three {
			margin-top: 30px;
			background: #fff;
			&-bar {
				display: flex;
				margin: 20px 27px;
			}
			&-search {
				width: 260px;
			}
			&-table {
				padding: 0 27px;
			}
			&-page {
				text-align: center;
				margin-top: 20px;
			}
		}
	}
	
	#tool {
		flex: 1;
		padding-top: 20px;
		padding-left: 20px;
		display: flex;
		.imgNull-box {
			display: flex;
			align-items: center;
			flex: 1;
			img {
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>
<template>
	<div>
		<div>
			<Cascader v-model="roomInfo" :data="cityList" trigger="hover" @on-change="handleChange" placeholder="请选择供电局与库房" style="width:200px"></Cascader>
		</div>
		<div class="home-one">
			<div class="home-one-l">
				<div class="home-title"><span>工器具生命周期</span><i><b></b><b></b><b></b></i></div>
				<div id="tool">
					<div class="imgNull-box" v-if="storageArr.length==0">
						<img src="../../assets/img/null.png" />
					</div>
				</div>
			</div>
			<div class="home-one-r">
				<div class="home-title"><span>使用次数排行</span><i><b></b><b></b><b></b></i></div>
				<div class="home-tool-parade">
					<img class="imgNull" v-if="rankArr.length==0" src="../../assets/img/null.png" />
					<template v-for="(i,index) in rankArr">
						<div class="home-tool-item">
							<span class="home-tool-num" v-if="index==0"><img src="../../assets/img/no1.png"/></span>
							<span class="home-tool-num" v-if="index==1"><img src="../../assets/img/no2.png"/></span>
							<span class="home-tool-num" v-if="index==2"><img src="../../assets/img/no3.png"/></span>
							<span class="home-tool-num" v-if="index==3">NO.4</span>
							<span class="home-tool-num" v-if="index==4">NO.5</span>
							<span class="home-tool-name" v-if="index<5">{{i.name}}</span>
							<span class="home-tool-ci" v-if="index<5">{{i.count}}次</span>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="home-two">
			<div class="home-title"><span>智能工具柜状态</span><i><b></b><b></b><b></b></i></div>
			<div class="home-two-bar">
				<div class="home-two-buff">
					<span><i class="home-existence"></i>状态：在库</span>
					<span><i class="home-disappear"></i>状态：借出</span>
				</div>
				<div class="home-two-btn">
					<span class="swiper-l" style="margin-right: 20px;"><Icon type="ios-arrow-back" size="20" color="#0052D9" /></span>
					<span class="swiper-r"><Icon type="ios-arrow-forward" size="20" color="#0052D9" /></span>
				</div>
			</div>
			<div class="home-toolList">
				<img class="imgNull" v-if="cabinetArr.length==0" src="../../assets/img/null.png" />

				<swiper :options="swiperOption">
					<swiper-slide v-for="(slide, index) in cabinetArr" :key="index">
						<div class="home-toolList-box">
							<div class="home-toolItem-name">{{slide.name}}号安全工器具柜</div>
							<div class="home-toolItem-state">
								<span>温度<b>26℃</b></span>
								<span>湿度<b>37℃</b></span>
							</div>
							<div class="home-toolItem-list">
								<div class="home-toolItem" v-for="(item,itemIndex) in slide.data" :key="itemIndex">
									<span class="home-toolItem-son">{{itemIndex}}、{{item.toolname}}</span>
									<span class="home-existence" v-if="item.status=='在库'"></span>
									<span class="home-disappear" v-else></span>
								</div>
							</div>
						</div>
					</swiper-slide>
				</swiper>
			</div>
		</div>
		<div class="home-three">
			<div class="home-title"><span>货架工器具状态</span><i><b></b><b></b><b></b></i></div>
			<div class="home-three-bar">
				<div class="home-three-search">
					<Input placeholder="请输入类容查询">
					<Icon type="ios-search" slot="prefix" />
					</Input>
				</div>
				<div style="margin: 0 44px 0 20px;">
					<Button type="primary">搜索</Button>
				</div>
				<div class="home-two-buff">
					<span><i class="home-existence"></i>状态：在库</span>
					<span><i class="home-disappear"></i>状态：借出</span>
				</div>
			</div>
			<div class="home-three-table">
				<Table ref="currentRowTable" :columns="columnsTool" :data="otherTableArr"></Table>
				<div class="home-three-page">
					<Page :total="otherTotal" @on-change="changePage" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	import * as api from '@/api/api.js';
	import Cookies from 'js-cookie';
	//引入echarts
	var echarts = require('echarts');
	//引入日期格式化插件
	let moment = require('moment');
	export default {
		name: 'home',
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				//库房数据
				storageArr: [],
				//排行数据
				rankArr: [],
				//工具柜数据
				cabinetArr: [],
				//台架数据
				otherArr: [],
				//展示的台架数据
				otherTableArr: [],
				otherTotal: 0,
				//供电局数据
				cityList: [],
				//轮播配置
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					},
					slidesPerView: 4,
					spaceBetween: 40,
					navigation: {
						nextEl: '.swiper-l',
						prevEl: '.swiper-r',
					}
				},
				swiperSlides: [1, 2, 3, 4, 5],
				columnsTool: [{
						type: 'index',
						width: 60,
						align: 'center'
					},
					{
						title: '名称',
						key: 'toolname'
					},
					{
						title: '状态',
						key: 'status'
					},
					{
						title: '到期试验时间',
						key: 'experiment_date',
						render: (h, params) => {
							return h('span', moment(params.row.experiment_date * 1000).format("YYYY-MM-DD"))
						}
					},
					{
						title: '投入使用时间',
						key: 'create_date',
						render: (h, params) => {
							return h('span', moment(params.row.create_date * 1000).format("YYYY-MM-DD"))
						}
					},
					{
						title: '生产厂家',
						key: 'company'
					}
				],
				roomInfo:[]
			}
		},
		created() {
			//			console.info('id', this.$store.state.user.urlParam)
			//			console.info('Cookies',Cookies.get('urlParam'))
			this.getInfo();
			console.info(233);
		},
		mounted() {
			this.initTool();
		},
		methods: {
			initTool() {
				//设置容器宽高
				let oDom = document.getElementById('tool');
				oDom.style.width = oDom.clientWidth;
				oDom.style.height = oDom.clientHeight;

			},
			//获取供电局
			getInfo() {
				this.$Spin.show();
				api.getData('get/group/info?' + Cookies.get('urlParam'), this).then((res) => {
					if(res.state == 200) {
						this.cityList = arrInfo(res.rets, 'check');
						if(sessionStorage.getItem('room')){
							this.roomInfo = JSON.parse(sessionStorage.getItem('room'))
							this.handleChange(this.roomInfo);						
						}
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
					this.$Spin.hide();
				})
			},
			//获取库房详情数据
			handleChange(val) {
				sessionStorage.setItem('room', JSON.stringify(val))
				api.getData('get/tool/info?room_id=' + val[val.length - 1], this).then((res) => {
					if(res.state == 200) {
						//柱形图数据
						let arrSeries = [0, 0, 0, 0, 0, 0]
						//处理柱形图数据
						for(let i of res.rets) {
							let day = (i.experiment_date - res.nowdate) / 86400;

							if(day < 30) {
								arrSeries[0]++;
							} else if(30 < day && day <= 60) {
								arrSeries[1]++;
							} else if(60 < day && day <= 120) {
								arrSeries[2]++;
							} else if(120 < day && day <= 150) {
								arrSeries[3]++;
							} else if(150 < day && day <= 180) {
								arrSeries[4]++;
							} else if(180 < day) {
								arrSeries[5]++;
							}
						}
						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('tool'));

						// 指定图表的配置项和数据
						var option = {
							title: {
								text: '* 下表为库房工器具生命周期统计（单位/件）'
							},
							tooltip: {},
							legend: {
								data: ['']
							},
							xAxis: {
								data: ["1月", "2月", "3月", "4月", "5月", "6月"]
							},
							yAxis: {},
							series: [{
								type: 'bar',
								data: arrSeries
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						this.storageArr = res.rets;
						sessionStorage.setItem('toolTableArr', JSON.stringify(res.rets))
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
				//获取排行
				api.getData('get/tool/rank?room_id=' + val[val.length - 1], this).then((res) => {
					if(res.state == 200) {
						this.rankArr = res.rets;
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
				//获取柜子、台架
				api.getData('get/cabinet/tool?room_id=' + val[val.length - 1], this).then((res) => {
					if(res.state == 200) {
						this.cabinetArr = res.cabinet;
						this.otherArr = res.other;
						this.otherTotal = res.other.length;
						this.setOther(1);
						sessionStorage.setItem('cabinet', JSON.stringify(res.cabinet))

					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
			},
			changePage(i) {
				this.setOther(i);
			},
			setOther(i) {
				this.otherTableArr = this.otherArr.slice(0 + (i - 1) * 10, 10 * i);
			}
		}

	}
	//处理供电局数据
	//	function arrInfo(data){
	//		let arr = [];
	//		for(let i of data){
	//			if(i.info&&i.info.length>0){
	//				arr.push({
	//					value:i.id,
	//					label:i.name,
	//					children:arrInfo(i.info)
	//				})
	//			}else{
	//				arr.push({
	//					value:i.id,
	//					label:i.name
	//				})
	//			}
	//		}
	//		return arr;
	//	}
	function arrInfo(data, state) {
		let arr = [];
		if(state == 'check') {
			for(let i of data) {
				if(i.info && i.info.length > 0) {
					arr.push({
						value: i.id,
						label: i.name,
						children: change(i.info)
					})
				} else {
					arr.push({
						value: i.id,
						label: i.name
					})
				}
			}
		} else {
			for(let i of data) {
				if(i.info && i.info.length > 0) {
					arr.push({
						value: i.id,
						label: i.name,
					})
				}
			}
		}
		return arr;
	}

	function change(data) {
		let arr = []
		for(let i of data) {
			if(i.info && i.info.length > 0) {
				arr.push({
					value: i.id,
					label: i.name,
					children: change(i.info)
				})
			} else {
				if(i.id && i.id.length > 6) {
					arr.push({
						value: i.id,
						label: i.name,
					})
				}
			}
		}
		return arr
	}
</script>